<script setup lang="ts">
import { useUserState, type typeUserInfo } from '@/store/userState'
import { ref, onMounted } from 'vue'
import { timeParse } from '@/utils/timeParse'
import login from '@/components/login.vue'
import * as video from '@/apis/video'

const props = defineProps(['vod_id'])
const vod_id: number = parseInt(props.vod_id)

const comment = ref('')
const editComment = ref(false)

const commentList = ref<any[]>([])
function getComment(page?: number) {
  video.getComment(vod_id).then(res => {
    if (page == 0 || !page) {
      commentList.value = res.data.data
      commentBox.value.scrollTo(0, 0)
    }
  })
}
onMounted(() => {
  getComment()
})

const commentBox = ref()
const userState = useUserState()
const userInfo = ref<any>()
onMounted(async () => {
  userInfo.value = await userState.getUserInfo()
})
function postComment() {
  if (comment.value.length < 6) {
    ElMessage('评论内容不得低于6个字哦~')
    return
  }
  video.postComment(vod_id, comment.value).then(res => {
    if (res.data.code != 200) {
      ElMessage(res.data.msg)
      return
    }
    getComment()
    closeCommitBox()
  })
}
function closeCommitBox() {
  editComment.value = false
  comment.value = ''
}
const showLoginBox = ref(false)
</script>

<template>
  <div class="commentBox" ref="commentBox" :class="{ 'commentBox-commitBoxEdit': editComment }">
    <div>
      <div v-if="commentList.length == 0">
        <el-empty image-size="140px" description="暂无评论" />
      </div>
      <div v-for="c in commentList" :key="c._id">
        <div class="commentBox-item">
          <div class="commentBox-item-header">
            <el-avatar :size="35" :src="c.avatarUrl" />
            <div class="commentBox-item-header-title">
              {{ c.username }}<span>{{ timeParse(c.date) }}</span>
            </div>
          </div>
          <div class="commentBox-item-com">{{ c.com }}</div>
        </div>
      </div>
      <div v-if="!userInfo" @click.stop="showLoginBox = true" class="commentBox-commitBox" :class="{ 'commentBox-commitBoxEdit': editComment }">
        <el-avatar src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
        <div class="commentBox-commitBox-input">
          <el-input :rows="1" resize="none" type="textarea" placeholder="需要登录才能参加讨论 ~" />
        </div>
      </div>
      <div v-else class="commentBox-commitBox" :class="{ 'commentBox-commitBoxEdit': editComment }">
        <el-avatar :src="userInfo.avatarUrl" />
        <div class="commentBox-commitBox-input">
          <el-input :rows="editComment ? 3 : 1" @focus="editComment = true" v-model="comment" resize="none" type="textarea" placeholder="说点什么吧 ~" />
          <div class="commentBox-commitBox-ctrBox">
            <div style="width: 100%"></div>
            <el-button @click="closeCommitBox" size="small" type="info" round>取消</el-button>
            <el-button size="small" color="#03c8d4" @click="postComment" round>发送</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <login @close="showLoginBox = false" :show="showLoginBox"></login>
</template>

<style scoped lang="less">
.el-textarea {
  --el-input-focus-border-color: rgba(1, 206, 205, 1);

  ::-webkit-scrollbar {
    width: 6px;
  }
  // 滚动条轨道
  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: 2px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0);
    border-radius: 10px;
  }

  &:hover {
    ::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
    }
  }
}
.commentBox-commitBoxEdit.commentBox {
  // background: #f00;
  height: calc(100% - 130px) !important;
}
.commentBox-commitBox.commentBox-commitBoxEdit {
  height: 130px;
  .commentBox-commitBox-ctrBox {
    display: flex;
  }
}
.commentBox {
  height: calc(100% - 50px) !important;
  overflow-y: auto;

  // 滚动条宽度
  &::-webkit-scrollbar {
    width: 3px;
  }
  // 滚动条轨道
  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0);
    border-radius: 10px;
  }

  &:hover {
    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
    }
  }

  &-item {
    padding: 20px 0px;
    margin: 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    &-header {
      display: flex;
      align-items: center;

      .el-avatar {
        margin-right: 10px;
      }

      &-title {
        font-size: 14px;
        font-weight: bold;

        span {
          font-size: 8px;
          margin-left: 10px;
          color: #888;
          font-weight: 500;
        }
      }
    }

    &-com {
      margin-top: 10px;
      font-size: 14px;
    }
  }

  &-commitBox {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 3px);
    height: 50px;
    background: rgb(30, 30, 36);
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    display: flex;
    align-items: flex-start;
    border-radius: 0 0 10px 0;
    padding: 10px 10px 0;
    --el-input-focus-border-color: #01cecd;
    --el-input-focus-border-color: #01cecd;
    // display: none;

    &-ctrBox {
      display: none;
      // display: flex;
      align-items: center;
      padding-top: 10px;

      .el-button {
        color: #fff !important;
        // --el-button-bg-color: #03c8d4;
        // --el-button-border-color:#03c8d4;
        // --el-button-hover-bg-color:#02a1a1;
        // --el-button-hover-border-color:#02a1a1;
        // --el-button-active-bg-color:#04eeee;
        // --el-button-active-border-color:#04eeee;
      }
    }
    .el-avatar {
      height: 30px;
      width: 30px;
      margin-right: 10px;
      flex-shrink: 0;
    }

    &-input {
      width: 100%;
    }
    // &-inputEdit{

    // }
  }
}
</style>
